<template> 
<view class="page">
	<!-- 我的证书 -->
	<template v-if="type=='1'">
		<view class="body">
			<template v-if="isLogin">
				<template v-if="loadingState.loading">
					<view class="m-t2">
						<loading :loadingState="loadingState"></loading>
					</view>
				</template>
				
				<template v-else>
					
					<!-- 获得领证资格 -->
					<template v-if="isCertificate==1">
						<!-- 已有证书 -->
						<template v-if="isHasCertificate">
							<!-- 证书资料通过审核 -->
							<template v-if="certificateInfo.isaudit==1">
								<view class="my-card">
									<template v-if="isFace">
										<image src="@/static/images/card.png" mode="widthFix"></image>
										<view class="content">
											<view class="pic"><image :src="web_host+certificateInfo.headpic" mode="widthFix"></image></view>
											<view class="info">
												<view class="row">
													<view class="item">
														<view class="label">姓 名</view>
														<view class="val">{{certificateInfo.realname}}</view>
													</view>
												</view>
												<view class="row">
													<view class="item">
														<view class="label">性 别</view>
														<view class="val">{{certificateInfo.sex_name}}</view>
													</view>
													<view class="item">
														<view class="label">出生日期</view>
														<view class="val">{{certificateInfo.birthday}}</view>
													</view>
												</view>
												<view class="row">
													<view class="item">
														<view class="label">证书编号</view>
														<view class="val">{{certificateInfo.ccnumber}}</view>
													</view>
												</view>
												<view class="row">
													<view class="item">
														<view class="label">发证日期</view>
														<view class="val">{{certificateInfo.sdate}}</view>
													</view> 
													<view class="item">
														<view class="label">到期日期</view>
														<view class="val">{{certificateInfo.edate}}</view>
													</view>
												</view> 
												<view class="row">
													<view class="item">
														<view class="label">颁发机构</view>
														<view class="val">{{certificateInfo.organization}}</view>
													</view>
												</view>
											</view>
										</view>
										<view class="gz"><image src="@/static/images/gz_icon.png" mode="widthFix"></image></view>
									</template>
									
									<template v-else>
										<image src="@/static/images/card-2.png" mode="widthFix"></image>
										<view class="text-wrap">
											<view class="text">1、本证证明持证人已完成红火蚁防控课程，并通过考核。</view>
											<view class="text">2、本证不得以任何形式转让，持证人需遵守国家相关规定从事红火蚁防控活动。</view>
											<view class="text">3、持证人需安全、谨慎开展红火蚁防控工作，如持证人使用云采集系统从事危害公共安全、自身或他人人身财产安全的或违反国家相关法律的行为，颁发机构有权撤销或拒绝继发证书。</view>											 
										</view>
									</template>							
								</view> 
								<view class="tab-btn">
									<view class="btn" @click="isFace=!isFace">{{isFace?'查看背面':'查看正面'}}</view>
								</view>
							</template>
							
							<!-- 证书资料审核中 -->
							<template v-else-if="certificateInfo.isaudit==0">
								<view class="not-card">
									<view class="iconfont f-s60 f-blue m-b2">&#xe636;</view>
									<text>您的证书正在审核中，请耐心等待...</text>
								</view>						
							</template>
							
							<!-- 证书资料审核失败 -->
							<template v-else>
								<navigator open-type="navigate" hover-class="none" url="/package_member/addCertificateform/addCertificateform?type=edit" class="not-card">
									<view class="iconfont f-s60 f-red m-b2">&#xe642;</view>
									<text>您的证书审核失败，请重新提交信息...</text>
									<view v-if="certificateInfo.audit_msg" class="iconfont f-red f-s24 m-t2">&#xe60a;{{certificateInfo.audit_msg}}</view>
								</navigator>						
							</template>
						</template>
						
						<!-- 没有证书 -->
						<template v-else>
							<navigator open-type="navigate" hover-class="none" url="/package_member/addCertificateform/addCertificateform?type=add" class="not-card">
								<view class="iconfont f-s60 f-grey m-b2">&#xeb89;</view>
								<text>您已满足领证条件，上传资料，获取证书</text>
							</navigator> 
						</template>
					</template>
					
					
					<!-- 未获得领证资格 -->
					<template v-else>
						<!-- 根据剩余发布数据量判断 是否需要继续学习发布数据  0 已完成实操数据发布   -->
						<template v-if="isMinData==0">
							<view class="not-card">
								<view class="iconfont f-s60 f-blue m-b2">&#xe636;</view>
								<text>您的实操数据正在审核中，请耐心等待...</text>
							</view>	
						</template>
						
						<template v-else>
							<view class="not-card">
								<view class="iconfont f-s60 f-red m-b2">&#xe642;</view>
								<text>还未满足领证条件，请先完成学习实操</text>
							</view>
							<view class="look-btn">
								<navigator open-type="navigate" hover-class="none" url="/package_member/certificate/certificate?type=2" class="btn">点这里，看视频学习，获取证书领取资格</navigator>
							</view>
						</template>
					</template>
					  
				</template>
				
				<view class="tips-wrap">
					<view class="hd">证书说明</view>
					<view class="text">1、本证过期无效。</view>
					<view class="text">2、从业人员需持证上岗。</view>
					<view class="text">3、持证人应自愿参与继续教育（系统操作更新、升级等）培训。</view>
					<view class="text">4、对于操作不规范的，且又拒绝参与继续教育培训的从业人员，颁发机构有权撤销或拒绝继发证书。</view>
				</view>
				
			</template>
		</view>
	</template>
	
	<!-- 学习 -->
	<template v-if="type=='2'">
		<view class="body">
			<template v-if="isLogin">
				<view class="video-box">
					<video class="myVideo" src="https://api.honghuoyi.com/static/video/qmfkcciexx.mp4" controls></video>
				</view> 
				
				<view class="look-btn">
					<navigator open-type="navigate" hover-class="none" :url="'/package_active/form/form?isStudy='+isMinData" class="btn">点这里，去发布 <text class="f-red f-wb"> {{isMinData}} </text> 条实操数据</navigator>
				</view>
				
				<view class="tips-wrap">
					<view class="hd">证书说明</view>
					<view class="text">1、本证过期无效。</view>
					<view class="text">2、从业人员需持证上岗。</view>
					<view class="text">3、持证人应自愿参与继续教育（系统操作更新、升级等）培训。</view>
					<view class="text">4、对于操作不规范的，且又拒绝参与继续教育培训的从业人员，颁发机构有权撤销或拒绝继发证书。</view>
				</view>
				
			</template>
		</view>
	</template>	
	 
</view>
</template>

<script> 
import loading from '@/components/loading-more.vue'
import {img_path} from '@/config.js'
export default{
	name:'demo',
	data(){
		return{ 
			type:1,   // 1 我的证书 2 看视频学习 
			isLogin:false,
			userInfo:uni.getStorageSync('userInfo'),
			isFace:true,
			isCertificate:'',   // 1 获得资格，去填写信息  // 0 不满足资格，需学习实操    
			isHasCertificate:false,   // 是否已有证书
			isMinData:0,
			isaudit:0,   // 1 审核通过  2 审核失败
			certificateInfo:{},
			sex:[
				{
					id:1,
					name:'男'
				},
				{
					id:2,
					name:'女'
				}
			],
			loadingState:{
				loading:true
			}, 
			isStop:true,
			web_host:img_path
		}
	},
	async onShow() {
		if(this.type==2){
			this.checkDataNum(); 
		}		
	},
	async onLoad(params) {
		this.type=params.type;
		this.isLogin=await this.$loginState('check');
		
		if(this.type==1){
			uni.setNavigationBarTitle({
				title:'我的证书'
			})
		}else{
			uni.setNavigationBarTitle({
				title:'如何获取证书'
			})
		}
		
		if(this.isLogin){
			if(this.type==1){
				this.checkCertificate();
			}
			
			// this.checkCertificate();  			
			 
		}
	},
	methods:{
		
		// 检测领证条件
		checkCertificate:async function(){
			let h_res=await this.$api.yfk_api.checkCertificate();    // 检测是否满足领取条件，1满足领取条件 
			this.isCertificate=h_res.data.ret;
			this.loadingState.loading=false; 
			if(h_res.data.ret==1){
				let res=await this.$api.yfk_api.certificateInfo(); 	 // 检测证书状态  isaudit=0 待审核  isaudit=1 审核通过 isaudit=2 审核失败
 				if(res.data.ret==1&&(res.data.data.isaudit==0||res.data.data.isaudit==1||res.data.data.isaudit==2)){					
					this.sex.forEach(item=>{
						if(item.id==res.data.data.sex){
							res.data.data.sex_name=item.name;
						}
					})
					this.isHasCertificate=true;  
					console.log(res.data.data)
					this.certificateInfo=res.data.data;
				}else{
					this.isHasCertificate=false;  
				} 
			}else{
				this.checkDataNum(); 
			}
		},
		
		
		// 检测是否还需要提交实操数据
		checkDataNum:async function(){
			let res=await this.$api.yfk_api.yfkminnum();   
			if(res.data.ret==1){
				this.isMinData=res.data.data.minnum;
			}
		},
		
		 
		 
		
	},
	computed:{ 
		certificate_state(){
			return this.$store.state.certificate_update;
		}
	},
	watch:{
		certificate_state(newer,older){
			if(newer!=older){
				this.checkCertificate();
			}
		}
	},
	components:{
		loading
	}
}
</script>

<style lang="less" scoped>
	.my-card{
		position: relative;
		margin: 20rpx;
		border-radius: 18rpx;
		overflow: hidden;
		box-shadow: 5rpx 5rpx 10rpx #ccc;
		image{
			width: 100%;			
		}
		.text-wrap{
			position: absolute;
			left: 0;
			bottom:0;
			width: 88%;
			height: 100%;
			display: flex;
			margin: 0 6%;
			flex-direction: column;
			justify-content: center; 
			color:#666;
			font-size: 22rpx;
		}
		.content{
			position: absolute;
			left: 0;
			bottom:0;
			width: 94%;
			height: 350rpx; 
			padding:0 3%;
			display: flex;
			justify-content: space-between;
			.row{
				display: flex;
				justify-content: space-between;
				margin-top: 15rpx;
			}
			.item{
				position: relative;
				display: flex;
				margin-bottom: 10rpx;
				font-size: 23rpx;
				.label{
					margin-right: 10rpx;					
					color:#323b42;
				}
				.val{
					position: relative;
					top:-5rpx;
					color:#666;
					font-size: 24rpx;
				}
			}
		}
		.pic{
			flex-shrink: 0;
			width: 25%;
			height: 200rpx;
			margin:70rpx 20rpx 0 0; 
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 100%;
			}
		}
		.info{
			flex-grow: 2;
			margin-top: 40rpx;
		}
		.gz{
			position: absolute;
			right:20rpx;
			bottom:20rpx;
			z-index: 1;
			width: 150rpx;
			height: 150rpx; 
			image{
				width: 100%;
			}
		}
	}
	.video-box{  
		margin-bottom: 20rpx;
		background: #f5f5f5;
		.myVideo{ 
			width: 100%;
		}
	}
	.tab-btn{
		display: flex;
		justify-content: center;
		.btn{
			padding:2rpx 10rpx;
			background: #ff9600;
			border-radius: 10rpx;
			color:#fff;
			font-size: 28rpx;
		}
	}
	.tips-wrap{
		margin:20rpx;
		.hd{
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
		.text{
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color:#666;
		}
	}
	.not-card{ 
		margin: 20rpx;
		padding:80rpx 0;
		background: #fff;
		border-radius: 15rpx;
		text-align: center;
		font-size: 30rpx;
		color:#666;
	}
	.look-btn{
		display: flex;
		justify-content: center;
		margin-bottom: 50rpx;
		.btn{
			padding:15rpx 20rpx;
			background: #ff9600;
			border-radius: 10rpx;
			color:#fff;
			font-size: 28rpx;
		}
	}
</style>
